<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1 @click="click">{{ name }}</h1>
    <h1 @click="click">{{$store.state.user.slogen}}</h1>
    <h1 >{{$store.getters.fullName}}</h1>
    <h1 >{{$store.getters.fullName3}}</h1>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { useStore } from "vuex";
import { toRefs } from "vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const click = () => {
      // store.dispatch("changeName", "dell");
      // store.commit('setSlogen','b')
      store.dispatch("text", "dell");
    };
    return { name, click };
  },
};
</script>
